<template>
    <div class="form-container">
        <h4 class="form-title">模式设置</h4>
        <el-form :model="formData" label-width="120px">
            <!-- 模式选择 -->
            <el-form-item label="模式">
                <div class="mode-options">
                    <el-radio-group v-model="formData.mode">
                        <el-radio label="sign" value="sign">签字模式</el-radio>
                        <el-radio label="photo" value="photo">照片模式</el-radio>
                    </el-radio-group>
                    <div class="mode-description">
                        <template v-if="formData.mode === 'sign'">
                            <p class="description-text">
                                签字模式下，参与者将在设备上直接签名。适合需要收集电子签名的场景，如合同签署、确认书等。
                            </p>
                        </template>
                        <template v-else-if="formData.mode === 'photo'">
                            <p class="description-text">
                                照片模式下，参与者将通过摄像头拍照。适合需要收集参与者照片的场景，如活动签到、身份验证等。
                            </p>
                        </template>
                    </div>
                </div>
            </el-form-item>

            <!-- 手签功能 -->
            <el-form-item label="手签功能">
                <el-switch v-model="formData.handSign" />
                <el-tooltip effect="dark" content="开启手签功能后，参与者可以在触摸屏上直接手写签名" placement="top">
                    <el-icon class="tip-icon">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </el-form-item>

            <!-- 拍照功能 -->
            <el-form-item label="拍照功能">
                <el-switch v-model="formData.photoCapture" />
            </el-form-item>

            <!-- 拍照输出比例 (仅在拍照功能开启时显示) -->
            <el-form-item label="拍照输出比例" v-if="formData.photoCapture">
                <el-input v-model="formData.photoScale.width" style="width: 100px" placeholder="宽度" />&nbsp;:&nbsp;
                <el-input v-model="formData.photoScale.height" style="width: 100px" placeholder="高度" />
                <el-tooltip effect="dark" content="开启拍照功能后，客户端照片将按此比例保存" placement="top">
                    <el-icon class="tip-icon">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </el-form-item>
        </el-form>
    </div>

    <!-- 底部操作栏 -->
    <FixedActionBar :visible="true">
        <!-- 主要操作按钮 -->
        <el-button @click="$router.push('/project-list')">
            返回
        </el-button>
        <el-button type="success" @click="saveSetting">
            <el-icon>
                <Setting />
            </el-icon>
            保存设置
        </el-button>
        <el-button type="primary" @click="openScreen">
            <el-icon>
                <Monitor />
            </el-icon>
            进入大屏
        </el-button>

    </FixedActionBar>
</template>

<script>
import FixedActionBar from '@/components/common/BottomActionBar.vue'

export default {
    components: {
        FixedActionBar,
    },
    props: {
        acid: {
            type: String,
            required: true
        },
        initialData: {
            type: Object,
            default: () => ({
                mode: 'sign',
                handSign: true,
                photoCapture: false,
                photoScale: { width: 400, height: 300 }
            })
        }
    },
    data() {
        return {
            formData: { ...this.initialData }
        }
    },
    methods: {
        async save() {
            try {
                // 这里实现保存逻辑，使用 this.acid 和 this.formData
                console.log('保存模式设置', this.acid, this.formData)
                return { modeSettings: this.formData }
            } catch (error) {
                console.error('保存模式设置失败:', error)
                throw error
            }
        },

        // 进入大屏
        openScreen() {
            console.log('进入大屏')
        },

        saveSetting() {

        }

    }
}
</script>

<style scoped>
.mode-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mode-description {
    color: #909399;
    font-size: 0.9em;
    line-height: 1.5;
    margin-top: 8px;
}

.tip-icon {
    margin-left: 10px;
    color: #909399;
    cursor: help;
}

.el-form-item {
    margin-bottom: 22px;
}
</style>
